<template>
    <view class="page">
        <view class="book">
            <!-- :bookTitle="item.bookTitle"
                    :author="item.author" :price="item.price" :oldPrice="item.oldPrice" :userImg="item.userImg"
                    :userName="item.userName" :bookLink="item.bookLink" -->
            <!-- +'width:4rem;height:5rem;' -->
            <!-- <view class="bookCover" :style="'background-image: url(' + book.bookLink + ');'"></view> -->
            <u--image class="bookCover" radius="6" width="4rem" height="5rem" :src="book.coverImage">
                <template v-slot:loading>
                    <u-loading-icon color="black"></u-loading-icon>
                </template>
            </u--image>
            <view class="text">
                <view class="leftText">
                    <view class="title">{{ book.bookTitle }}</view>
                    <view class="author">{{ book.author }}</view>
                    <view class="bottom">
                        <image :src="book.userImg"></image>
                        <view class="userName">{{ book.userName }}</view>
                    </view>
                </view>
                <view class="rightText">
                    <view class="price"><span>￥</span>{{ book.curprice }}</view>
                    <view class="oldPrice"><span>￥</span>{{ book.price }}</view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'bookCover',
    props: {
        book: Object,
    },
}
</script>

<style lang="scss">
page {
    .page {
        height: 80%;
        width: 80%;

        .book {
            width: 100%;
            height: 100%;
            border-radius: 1rem;
            background-color: #fff;
            box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: row;
            align-items: center;

            .bookCover {
                margin-left: 1rem;
                width: 4rem !important;
                height: 5rem !important;
                border-radius: 0.5rem;
                background-size: 100% 100%;
                background-position: center;
            }

            .text {
                width: 65%;
                height: 100%;
                // background-color: red;
                display: flex;
                flex-direction: row;
                // justify-content: right;

                align-items: center;

                .leftText {
                    width: 100%;

                    .title {
                        line-height: 2rem;
                        overflow: hidden;
                        width: 11rem;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        -o-text-overflow: ellipsis;
                        text-align: center;
                        font-size: 1rem;
                        font-weight: bold;
                        color: black;
                    }

                    .author {
                        line-height: 1rem;
                        text-align: center;
                        font-size: 0.8rem;
                        color: #999;
                    }

                    .bottom {
                        display: flex;
                        flex-direction: row;
                        justify-content: left;
                        align-items: center;
                        padding-left: 1rem;
                        margin-bottom: 1rem;

                        image {
                            width: 1.5rem;
                            height: 1.5rem;
                            border-radius: 50%;
                            background-size: 100% 100%;
                            background-position: center;
                        }

                        .userName {
                            padding-left: 0.5rem;
                            line-height: 1.5rem;
                            text-align: center;
                            font-size: 0.8em;
                            color: #999;
                        }
                    }
                }

                .rightText {
                    // background: red;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    // background-color: red;
                    .price {
                        line-height: 1.5rem;
                        text-align: center;
                        font-size: 1rem;
                        font-weight: bold;
                        color: #ff5e00;

                        span {
                            font-size: 0.5rem;
                        }
                    }

                    .oldPrice {
                        line-height: 1.5rem;
                        text-align: center;
                        font-size: 0.8rem;
                        color: #999;
                        text-decoration: line-through;

                        span {
                            font-size: 0.5rem;
                        }

                    }
                }


            }
        }
    }
}
</style>